<template>
  <div>
    <el-button-group>
      <el-button type="primary" :icon="CirclePlus" v-auth="'CreateFlow'" @click="data.formVisible = true">
        新建流程
      </el-button>
      <el-button type="primary" :icon="Refresh" @click="handleQuery">刷新</el-button>
    </el-button-group>
    <el-empty
      v-if="!data.loading && data.resp.total == 0"
      description="开始创建第一个流程"
      @click="data.formVisible = true"
    />
    <el-row :gutter="12" class="list" v-loading="data.loading">
      <el-col :span="6" style="margin-top: 15px" v-for="(item, index) in data.resp.list" :key="index">
        <el-card shadow="hover" class="item" @click="handleDesign(item)">
          <div class="content">
            <el-icon :size="20" color="#409EFF"><SetUp /></el-icon>
            {{ item.name }}
          </div>
          <div class="version">版本: V{{ item.version }}</div>
        </el-card>
      </el-col>
    </el-row>
    <div v-if="data.resp.total > 0" class="page">
      <el-pagination
        v-model:current-page="data.page.pageNum"
        v-model:page-size="data.page.pageSize"
        small
        :page-sizes="[16, 32, 48, 64]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.resp.total"
        @size-change="handleQuery"
        @current-change="handleQuery"
      />
    </div>
    <Form v-model:visible="data.formVisible" @success="handleDesign" />
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { CirclePlus, Refresh, SetUp } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElCard, ElPagination, ElMessage, ElEmpty } from 'element-plus'
import { useAuth } from '@/hooks/auth'
import { flowDefApi } from '@/api/modules/flow/flowDef'
import Form from './Create.vue'

const data = reactive({
  resp: { list: [] as any[], total: 0 },
  page: { pageNum: 1, pageSize: 16 },

  loading: false,
  formVisible: false
})
const handleQuery = () => {
  data.loading = true
  const page = { ...data.page, sort: {}, filter: {} }
  flowDefApi.findDefPage(page, { status: 1 }).then(resp => {
    if (resp.success) {
      data.resp = resp.data
    }
    data.loading = false
  })
}
onMounted(handleQuery)

const { hasFuncKey } = useAuth()
const router = useRouter()
const handleDesign = (item: any) => {
  if (hasFuncKey('DesignFlow')) {
    router.push({ name: 'flw-def-flow-design', query: { name: item.name, key: item.key } })
  } else {
    ElMessage.warning('无修改流程权限')
  }
}

window.addEventListener('message', function (event) {
  // 通过origin对消息进行过滤，避免遭到XSS攻击
  if (event.origin === import.meta.env.VITE_BPMN_URL) {
    if (event.data.deploy) {
      handleQuery()
    }
  }
})
</script>

<style lang="scss" scoped>
:deep(.list) {
  .el-card__body {
    &:hover {
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: $--size-font-large;
  }
  .version {
    display: flex;
    justify-content: center;
    color: $--color-text-secondary;
    font-size: $--size-font-small;
  }
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
